<template>
	<div class="tab-box row wrap">
		<el-tag
			v-for="tag in tagList"
			:key="tag"
			:type="isOpenWarning ? '' : 'info'"
			class="t-item"
			closable
			:disable-transitions="false"
			@close="handleClose(tag)"
		>
			{{ tag }}
		</el-tag>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["delLisence"]);
const props = defineProps({
	tagList: {
		type: Array,
		required: true,
		default: () => [],
	},
	isOpenWarning: {
		type: Boolean,
		default: () => true,
	},
});

const handleClose = (tag: string) => {
	if (!props.isOpenWarning) return;
	emit("delLisence", tag);
};
</script>

<style lang="scss" scoped>
.tab-box {
	width: 400px;
	height: 120px;
	overflow-y: scroll;
	padding: 12px;
	border: 1px solid rgba($color: #000000, $alpha: 0.1);
	gap: 8px;
	align-content: flex-start;
	.t-item {
	}
}
</style>
